<template>
	<div class="w100 h100 relative flex-col object">
		<div class="header p-x-10 f-s-20 fw">资源库</div>

		<!-- 内容模板 -->
		<DefineTemplate v-slot="{ list }">
			<div
				v-for="(item, i) in list"
				:key="item.id"
				:class="[{ 'is-active': item.id === active.id }, 'item pointer']"
				@click="() => emits('click', item.id)"
			>
				<span class="flex s-center">
					<my-icon icon="dengguang" class="m-r-10 f-s-16" />
					<span class="fw">{{ item.name }}</span>
				</span>
				<span class="flex s-center caozuo">
					<my-icon icon="Delete" class="m-r-10 f-s-16" @click.stop="() => emits('delete', item.id, i)" />
					<my-icon
						:icon="item.visible ? 'EyeOutline' : 'EyeOffOutline'"
						@click.stop="
							() => {
								item.visible = !item.visible;
								emits('visible', item.id);
							}
						"
						class="f-s-16"
					/>
				</span>
			</div>
		</DefineTemplate>

		<!-- 场景内容 -->
		<el-tabs tab-position="left" type="card" class="object-tabs f1 h0">
			<el-tab-pane>
				<template #label>
					<my-icon icon="xiangji" class="f-s-20" />
				</template>
				<div
					v-for="item in cameraList"
					:key="item.id"
					:class="[{ 'is-active': item.id === active.id }, 'item pointer']"
					@click="() => emits('click', item.id)"
				>
					<span class="flex s-center">
						<my-icon icon="xiangji" class="m-r-10 f-s-16" />
						<span class="fw">{{ item.name }}</span>
					</span>
				</div>
			</el-tab-pane>
			<el-tab-pane>
				<template #label>
					<my-icon icon="moxingguanli" class="f-s-20" />
				</template>
				<ReuseTemplate :list="modelList" />
			</el-tab-pane>
			<el-tab-pane>
				<template #label>
					<my-icon icon="dengguang" class="f-s-20" />
				</template>
				<ReuseTemplate :list="lightList" />
			</el-tab-pane>
		</el-tabs>

		<!-- 属性 -->
		<el-tabs type="border-card" class="f1 h0 attribute">
			<el-tab-pane label="属性" v-if="active.id">
				<!-- 模型属性 -->
				<my-form
					v-if="active.obj.isModel"
					:model="active.obj"
					label-width="60"
					:formItem="[
						{
							label: '名称',
							prop: 'name',
							required: true,
							onChange: (val) => {
								const data = [...modelList, ...lightList].find((item) => item.id === active.id);
								console.log(active.obj);
								data.name = val;
							}
						},
						{
							label: '位置',
							prop: 'position'
						},
						{
							label: '旋转',
							prop: 'rotation'
						},
						{
							label: '缩放',
							prop: 'scale'
						}
					]"
				>
					<template #position="{ model, prop }">
						<div class="flex gap-4">
							<el-input-number v-model="model[prop].x" controls-position="right" :step="0.1" />
							<el-input-number v-model="model[prop].y" controls-position="right" :step="0.1" />
							<el-input-number v-model="model[prop].z" controls-position="right" :step="0.1" />
						</div>
					</template>
					<template #rotation="{ model, prop }">
						<div class="flex gap-4">
							<el-input-number v-model="model[prop].x" controls-position="right" :step="0.1" />
							<el-input-number v-model="model[prop].y" controls-position="right" :step="0.1" />
							<el-input-number v-model="model[prop].z" controls-position="right" :step="0.1" />
						</div>
					</template>
					<template #scale="{ model, prop }">
						<el-input-number
							v-model="model[prop].x"
							controls-position="right"
							:step="0.1"
							@change="
								(val) => {
									model[prop].x = val;
									model[prop].y = val;
									model[prop].z = val;
								}
							"
						/>
					</template>
				</my-form>
				<!-- 灯光属性 -->
				<my-form
					v-if="active.obj.isLight"
					:model="active.obj"
					label-width="60"
					:formItem="[
						{
							label: '名称',
							prop: 'name',
							required: true,
							onChange: (val) => {
								const data = [...modelList, ...lightList].find((item) => item.id === active.id);
								data.name = val;
							}
						},
						{
							label: '位置',
							prop: 'position'
						},
						{
							label: '强度',
							prop: 'intensity'
						},
						{
							label: '颜色',
							prop: 'color'
						}
					]"
				>
					<template #position="{ model, prop }">
						<div class="flex gap-4">
							<el-input-number v-model="model[prop].x" controls-position="right" :step="0.1" />
							<el-input-number v-model="model[prop].y" controls-position="right" :step="0.1" />
							<el-input-number v-model="model[prop].z" controls-position="right" :step="0.1" />
						</div>
					</template>
					<template #intensity="{ model, prop }">
						<el-input-number v-model="model[prop]" controls-position="right" :step="1" />
					</template>
					<template #color="{ model, prop }">
						<div class="flex gap-4">
							<el-color-picker
								:model-value="model[prop].getHexString()"
								@activeChange="
									(val) => {
										model[prop] = new THREE.Color(val);
									}
								"
							/>
							<my-input :model-value="model[prop].getHexString()" disabled />
						</div>
					</template>
				</my-form>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
import { THREE } from '@u/threeMinx';
/************************** 组件内模板 ***************************/
import { createReusableTemplate } from '@vueuse/core';
const [DefineTemplate, ReuseTemplate] = createReusableTemplate();

/***
 * props
 * @property {Array} cameraList  相机列表
 * @property {Array} modelList 模型列表
 * @property {Array} lightList 灯光列表
 */
defineProps({
	cameraList: {
		type: Array,
		required: true
	},
	modelList: {
		type: Array,
		required: true
	},
	lightList: {
		type: Array,
		required: true
	},
	active: {
		type: Object,
		default: () => {}
	}
});

const emits = defineEmits(['click', 'delete', 'visible']);
</script>

<style lang="scss" scoped>
.object {
	.header {
		height: 40px;
		line-height: 40px;
		background-color: var(--color-bg-2);
	}
	.object-tabs {
		:deep() {
			.el-tabs__header {
				border: 0;
				margin: 0;
				background-color: var(--color-bg-2);
			}
			.el-tabs__content {
				height: 100%;
				.el-tab-pane {
					width: 100%;
					height: 100%;
					padding: 10px;
					box-sizing: border-box;
				}
			}
			.el-tabs__nav {
				border: 0 !important;
			}
			.el-tabs__item {
				border: 0 !important;
				padding: 0;
				width: 40px;
				height: 50px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.is-active {
				background: var(--color-bg-1);
			}
		}
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 40px;
			padding: 10px;
			box-sizing: border-box;
			transition: var(--el-transition-all);
			border-left: 2px solid transparent;

			&:hover {
				background-color: var(--color-bg-2);
			}
		}
		.is-active {
			background-color: var(--color-bg-2);
			border-color: var(--el-color-primary);
		}
	}
	.attribute {
		:deep() {
			.el-tabs__header {
				margin: 0;
				background-color: var(--color-bg-2);
			}
			.el-tabs__content {
				height: 100%;
				padding: 0;
				.el-tab-pane {
					width: 100%;
					height: 100%;
					padding: 10px;
					box-sizing: border-box;
				}
			}
		}
	}
}
</style>
